<template>  
	<div class="pagination">
    <button @click="changePageNo(pageNo-1)" :disabled="pageNo === 1">上一页</button>
    <button @click="changePageNo(1)" v-show="startEnd.start > 1">1</button>
    <span v-show="startEnd.start > 2">···</span>
    

    <!-- <button v-for="n in startEnd.end-startEnd.start+1" :key="n">{{ n + startEnd.start -1 }}</button> -->
    <button @click="changePageNo(index + startEnd.start)" :class="{active:pageNo === index + startEnd.start}" v-for="(n,index) in startEnd.end - startEnd.start + 1" :key="index">{{ index + startEnd.start }}</button>

    
    <span v-show="startEnd.end < totalPage - 1">···</span>
    <button @click="changePageNo(totalPage)" v-show="startEnd.end < totalPage">{{totalPage}}</button>
    <button @click="changePageNo(pageNo+1)" :disabled="pageNo === totalPage">下一页</button>
    
    <span>共 {{total}} 条</span>
  </div>
</template>

<script>    
  export default {      
    name: "Pagination",  
    props:{
        total:{
            type:undefined,
            required:true
        },
        pageSize:{
            type:Number,
            required:true
        },
        pageNo:{
            type:Number,
            required:true
        },
        continues:{
            type:Number,
            default:5
        },
        changePageNo:{
            type:Function,
            required:true
        }
    },
    computed:{
        // 计算总页码
        totalPage(){
            return Math.ceil(this.total/this.pageSize)
        },

        
        // 计算连续分页的起始值和结束值

        startEnd(){
            // 1.  计算连续分页： 【正常情况】  pageNo +- (continues - 1)/2
            // 2.  计算连续分页： 【特殊情况】  当传入的 continues > totalPage  start =1 ; end = totalPage
            // 3.  计算连续分页： 【特殊情况二】 当计算的 start < 1;  start = 1 ; end = continues
             // 4.  计算连续分页： 【特殊情况三】  当计算的 end > totalPage;  start = totalPage-continues+1 ; end = totalPage
        //解构
            let {pageNo,continues,totalPage} = this;
            // 起始值
            let start;
            //结束值
            let end;
            //   【特殊情况】  当传入的 continues > totalPage  start =1 ; end = totalPage
            if(continues > totalPage){
                start = 1;
                end = totalPage;
            }else{
                //计算
            start = pageNo - (continues-1)/2;
            end = pageNo + (continues - 1)/2;

            // 计算连续分页： 【特殊情况二】  当计算的 start < 1;  start = 1 ; end = continues
            if(start < 1){
                start = 1;
                end = continues;
            }

            // 计算连续分页： 【特殊情况三】  当计算的 end > totalPage;  start = totalPage-continues+1 ; end = totalPage
            if(end > totalPage){
                start = totalPage - continues + 1;
                end = totalPage;
            }
        }
            return{
                start,
                end
            }
        }
        
    }  
  };
</script>

<style lang="less" scoped>
  .pagination {
    text-align: center;

    button {
      margin: 0 5px;
      background-color: #f4f4f5;
      color: gray;
      outline: none;
      border-radius: 2px;
      padding: 0 4px;
      vertical-align: top;
      display: inline-block;
      font-size: 13px;
      min-width: 35.5px;
      height: 28px;
      line-height: 28px;
      cursor: pointer;
      box-sizing: border-box;
      text-align: center;
      border: 0;

      &[disabled] {
        color: #c0c4cc;
        cursor: not-allowed;
      }

      &.active {
        cursor: not-allowed;
        background-color: #c81623;
        color: #fff;
      }
    }

    span {
      display: inline-block;
      line-height: 28px;
      font-size: 14px;
      color: gray;
      vertical-align: middle;
    }
  }
</style> 
